<template>
  <div>
    <el-table :data="stuList" border style="width: 100%">
      <el-table-column prop="studentDO.id" label="学生编号"> </el-table-column>
      <el-table-column prop="studentDO.name" label="学生名"> </el-table-column>
      <el-table-column prop="studentDO.age" label="学生年龄"> </el-table-column>

      <el-table-column prop="studentDO.classDO.name" label="班级名称">
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="StuById(scope.row.studentDO.id)"
            >修改</el-button
          >
          <el-popconfirm
            @confirm="delpo(scope.row.studentDO.id)"
            title="这是一段内容确定删除吗？"
          >
            <el-button slot="reference" type="text" size="small"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button type="text" size="small" @click="handleClick(scope.row)"
            >看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

import { delStu } from "../service";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  created() {
    this.showStu();
  },
  // 得到mutations的方法和state
  computed: {
    ...mapState("student", ["stuList"]),
  },
  methods: {
    ...mapMutations('student',[,'setDialogVisible']),
    ...mapActions("student", ["showStu"]),

    StuById(id) {
      // this.findStu(id);
      this.setDialogVisible(true);
    },

    async delpo(stuId) {
      let response = await delStu(stuId);
      this.showStu();
    },

    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style></style>
